<template>
    <div class="content">
        <div
            v-for="item in list.data"
            :key="item.name"
            class="business"
        >
            <p class="business-name">
                <IconPro0 class="business-name-icon"/>
                <span>{{ item.name }}文档</span>
            </p>
            <ul class="product document">
                <li
                    v-for="ite in item.children"
                    :key="getValue(ite, '名称')"
                    class="product-item document-item"
                >
                    <a
                        :href="getValue(ite, '知识库链接')"
                        :title="getValue(ite, '名称')"
                        target="_blank"
                        class="document-serve"
                    >
                        <div class="product-logo document-logo">
                            <img
                                v-if="logoUrl(ite)"
                                :src="logoUrl(ite)"
                                :alt="getValue(ite, '名称')"
                            >
                            <span v-else>
                                {{ getValue(ite, '名称').charAt(0) }}
                            </span>
                        </div>
                        <span class="document-name">
                            {{ getValue(ite, '名称') }}
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
import list from '@/config/document.json';
import {getValue} from '@/utils';

const images = list.logo.map(item => item.slice(0, -4));
const logoUrl = (obj: Record<string, any>) => {
    const logoName = getValue(obj, '名称').replace(/\s+/g, '');
    return images.includes(logoName) ? new URL(`/src/assets/logos/document/${logoName}.png`, import.meta.url).href : '';
};
</script>

<style lang="less" scoped>
@import (reference) url('assets/styles/common.less');
.content {
    .document {
        display: grid;
        grid-template-columns: repeat(5, calc(20% - 24px));
        gap: 18px 24px;
        &-item {
            padding: 12px 16px;
            font-size: @font-size-title;
            font-weight: bold;
            &:hover {
                cursor: pointer;
            }
        }
        &-serve {
            width: 100%;
            display: flex;
            align-items: center;
            line-height: 26px;
        }
        &-name {
            .text-ellipsis();
            width: calc(100% - 40px);
            padding: 0 12px;
            color: @font-title-color;
        }
        &-logo {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 19px;
            font-size: @font-size-big-title;
            font-weight: bold;
            color: @font-blue-color;
            background: @bg-body-color;
            img {
                width: 20px;
            }
        }
    }
}
</style>
